<template>
  <div style="margin-bottom: 30px; ">
    <div style="float:left;">
      <el-text class="mx-1"> 用户名：</el-text>
      <el-input v-model="search" clearable style="width: 200px" placeholder="输入书名" />
    </div>
    <div class="block" style="float:left;">
      <el-text class="mx-1">借书日期</el-text>
      <el-date-picker v-model="value1" type="date" placeholder="Pick a date" :default-value="new Date(2010, 9, 1)" />
    </div>
    <div class="block" style="float:left;">
      <el-text class="mx-1">还书日期</el-text>
      <el-date-picker v-model="value1" type="date" placeholder="Pick a date" :default-value="new Date(2010, 9, 1)" />
    </div>
    <el-button type="primary" icon="Search" style="margin-left: 30px;">搜索</el-button>
  </div>
  <!-- <el-button type="primary" :disabled="login.data.right == 'common'" icon="Edit" circle color:red></el-button> -->
  <el-table :data="borrowInfoList.data" border style="width: 100%" default-expand-all>
    <el-table-column label="ID" prop="borrowId" align="center" />
    <el-table-column label="借书人" prop="username" align="center" />
    <el-table-column label="书名" prop="bookName" align="center" />

    <el-table-column label="借书日期" prop="date1" align="center" :formatter="dateFormat" />

    <el-table-column label="还书日期" prop="date2" align="center" :formatter="dateFormat" />
    <el-table-column label="操作" align="center">

      <!-- 使用template中的作用域插槽，
      它的作用是在外部获取组件内的数据 ,
      这里是为了获取这一行的数据，
      我们让slot-scope值为scope，那么由scope.row就可以得到数据了 -->
      <template #default="scope">

        <el-button type="primary"  v-if="scope.row.date2 ==null" @click="renew(scope.row.borrowId)">续借</el-button>
        <el-button type="danger"  v-if="scope.row.date2 ==null"  @click="returningBook(scope.row)">还书</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
    <mypage :total="total"></mypage>
  </div>
</template>

<script setup>
import mypage from '../components/page.vue'
import axios from "axios";

import {ElMessage, ElMessageBox} from "element-plus";

import { ref, reactive, computed, onMounted, onBeforeMount, toRefs } from 'vue'
import moment from "moment";
//按需导入
const search = ref();//定义简单数据类型
const borrowInfoList = reactive({});//定义复杂数据类型
const total = ref(0);
const login = reactive({})
/*日期处理*/
const dateFormat = (row, column) => {
  var date = row[column.property];
  if (date === null) {
    return ''
  }
  return moment(date).format("YYYY-MM-DD")
};
const handleEdit = (id) => {
  console.log(id);
};//自定义方法

const handleDelete = (id) => {
  console.log(id);
}
onBeforeMount(() => {
  login.data = JSON.parse(sessionStorage.getItem("user"));
  getBorrowInfoList()
})
// onMounted(() => {
//
//
// })//生命周期函数的变化加了on 去掉了created

const getBorrowInfoList = () => {
  axios.get('/book/getBorrowBookInfoByID/' + login.data.uid).then(res => {
    if (res.data.code == 200) {
      borrowInfoList.data = res.data.result
    }
    // total.value = res.data.total
  })
}

const renew=(id)=>{
  const data={
    borrowId:id,
    date1:new Date()
  }
  console.log(data)
  axios.post("/book/renewBook",data).then(res => {
    if (res.data.code == 200) {
      ElMessage({
        type: "success",
        message: res.data.msg,
      });
    } else {
      ElMessage({
        type: "error",
        message: res.data.msg,
      });
    }
    getBorrowInfoList()
  })
}

const returningBook = (row) => {

  const data={
    borrowId:row.borrowId,
    date2:new Date(),
    bookId:row.bookId
  }
  console.log(data)
  axios.post("/book/returningBook",data).then(res => {
    if (res.data.code == 200) {
      ElMessage({
        type: "success",
        message: res.data.msg,
      });
    } else {
      ElMessage({
        type: "error",
        message: res.data.msg,
      });
    }
    getBorrowInfoList()
  })
}
//计算属性的写法
// const filterTableData = computed(() => {
//   // //变量的访问方式 没有了this 而采用了 ref定义的用了value
//   //   if (search.value) {
//   // //变量的访问方式 没有了this 而采用了 reactive定义的用了data
//   //     return booklist.data.filter((data)=>data.bookname.includes(search.value)).data
//   //   } else {
//   //    return booklist.data;
//   //   }
//   return (!search.value) ? borrowInfoList.data : borrowInfoList.data.filter((data) => data.username.includes(search.value))
//
// })
</script>
<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
  display: inline-block;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>